<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" class="appClass">
      <span>{{name}}</span>
    </div>
    <!-- <div id="extend"></div> -->
    <!-- <p>{{nameAndAge}}{{nameAndAge}}{{nameAndAge}}</p> -->
    <script src="dist/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script>
      // Mixin
      // Vue.mixin({
      //   created() {
      //     console.log("mixin1");
      //   },
      // });
      // Vue.mixin({
      //   created() {
      //     console.log("mixin2");
      //   },
      // });
      // Vue.component(
      //   "my-button",
      //   Vue.extend({
      //     template: `<span>全局组件 my-button</span>`,
      //   })
      // );
      // 实例
      let vm = new Vue({
        el: "#app", // el 挂载元素的位置
        data() {
          return {
            name: "vance",
            age: 123,
            h2: "dong",
            a: { b: 1 },
            list: [1, 2, 3],
            objList: [{ x: 1, y: 2 }],
            array: [5, 6, [7, 8, [9, 10]]],
          };
        },
        // created() {
        //   console.log("vue created");
        // },
        computed: {
          nameAndAge: {
            get() {
              return this.name + this.age;
            },
            set(newVal) {
              console.log(newVal);
            },
          },
        },
        // watch: {
        //   name(newValue, oldValue) {
        //     console.log("name", newValue, oldValue);
        //   },
        // },
      });
      console.log(vm);

      // setTimeout(() => {
      //   vm.name = "dong1";
      //   vm.name = "dong2";
      //   vm.name = "dong3";
      //   vm.name = "dong";
      // }, 1000);

      // // 外部写 watch
      // // vm.$watch(
      // //   () => vm.age,
      // //   function (newValue, oldValue) {
      // //     console.log("age", newValue, oldValue);
      // //   }
      // // );

      // // 多层数组嵌套
      // // vm.array[2][2].push(11)
      // // $set 原理 调用 __ob__.dep.notify

      // setTimeout(() => {
      //   vm.name = 'ddd';
      //   vm.age = 456;
      // }, 1000);

      // 顺序很关键。。。
      // vm.name = "vancccccc";

      // $nextTick 只是将回调函数放到队列中，并不是创建了一个异步任务，所以是谁先入队谁先执行
      // vm.$nextTick(() => {
      //   console.log(document.querySelector("#app").innerHTML);
      // });

      // console.log(document.querySelector("#app").innerHTML);
      // setTimeout(() => {
      //   console.log(document.querySelector("#app").innerHTML);
      // });
      // Promise.resolve().then(() => {
      //   console.log(document.querySelector("#app").innerHTML);
      // });


      // let Sub = Vue.extend({
      //   template: `<button>extend<my-button></my-button></button>`,
      //   components: {
      //     'my-button': {
      //       template: `<span>自己声明的 button</span>`,
      //     },
      //   },
      // });
      // new Sub().$mount("#extend");
    </script>
  </body>
</html>
